<template>
  <div class="zhuanti">
    <div class="box" v-for="item in ToPicList" :key="item.id">
      <img :src="item.scene_pic_url" alt="" />
      <div class="title">{{ item.title }}</div>
      <div class="tip">{{ item.subtitle }}</div>
      <div class="price">{{ item.price_info | RMBformat }}</div>
    </div>
    <van-pagination
      v-model="currentPage"
      :page-count="2"
      mode="simple"
      @change="onChange"
    />
  </div>
</template>

<script>
import { GetToPicData } from "../request/api";
export default {
  data() {
    return {
      currentPage: 1,
      ToPicList: [],
      totalPages: null,
    };
  },
  methods: {
    onChange() {
      this.currentPage == 1 ? (this.currentPage = 1) : (this.currentPage = 2);
      console.log(this.currentPage);
      GetToPicData({ page: this.currentPage == 1 ? 1 : 2, size: 10 })
        .then((res) => {
          if (res.errno == 0) {
            console.log(res.data);
            let { data, currentPage, totalPages } = res.data;
            this.ToPicList = data;
            this.currentPage = currentPage;
            this.totalPages = totalPages;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  filters: {
    // RMBformat 是过滤器的名字
    RMBformat(RMBformat) {
      // 参数value接收 | 前面的数据
      return "￥" + RMBformat.toFixed(2) + "元";
    },
  },
  created() {
    GetToPicData({ page: this.currentPage == 1 ? 1 : 2, size: 10 })
      .then((res) => {
        if (res.errno == 0) {
          console.log(res.data);
          let { data, currentPage, totalPages } = res.data;
          this.ToPicList = data;
          this.currentPage = currentPage;
          this.totalPages = totalPages;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>
 
<style lang = "less" scoped>
.zhuanti {
  padding-bottom: 100px;

  .box {
    background-color: #fff;
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 20px;
    img {
      width: 100%;
    }
    .title {
      font-size: 18px;
      margin: 10px 0;
    }
    .tip {
      font-size: 16px;
      margin: 20px 0;
      color: #1f1f1f;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .price {
      color: #9b0000;
      margin-bottom: 10px;
    }
  }
}
</style>